<template>
    <!-- 标题区域 -->
    <div>
        <header class="header">
            <h1>学习路由的使用：理解views中的路由组件和components中的一般组件</h1>
        </header>
    </div>
    <hr>
    <!-- 导航区域 -->
    <div class="nav">
        <!-- nav标签：定义导航标签-->
        <nav>
            <!-- router-link标签：定义导航链接:三种方式：1.字符串 2.对象+路由名字 3.对象+路由地址 -->
            <!-- active-class属性：设置当前激活的链接的样式 -->
             <!-- 加replace属性：无法返回到历史访问记录。不加为push模式，可以返回到历史访问记录。-->
            <router-link replace to="/Home" active-class="active">首页</router-link>
            <router-link replace :to="{name:'guanyu'}" active-class="active">关于</router-link>
            <router-link replace :to="{path:'/Content'}" active-class="active">内容</router-link>
            <router-link replace :to="{path:'/News'}" active-class="active">新闻</router-link>
        </nav>
    </div>
    <hr>
     <!-- 展示区域 -->
    <div class="show" v-if="showContent">
        <router-view></router-view>
    </div>
</template>

<script setup lang="ts">
import { RouterView } from 'vue-router'
import { onMounted } from 'vue';
import { ref } from 'vue';
// 定义一个响应式变量控制内容区域的显示
const showContent = ref(false);

onMounted(() => {
    // 组件挂载后立即显示内容区域
    showContent.value = true;
});

</script>

<style scoped>
.header {
    text-align: center;
    padding: 20px;
    background-color: #42b983;
    color: white;
    margin-bottom: 20px;
}

.header h1 {
    margin: 0;
    font-size: 24px;
}

.nav {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.nav nav {
    display: flex;
    gap: 20px;
}

.nav a {
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 4px;
    color: #333;
    font-weight: bold;
    transition: all 0.3s ease;
}

.nav a:hover {
    background-color: #f0f0f0;
}

.nav a.active {
    background-color: #42b983;
    color: white;
}

.show {
    padding: 20px;
    min-height: 300px;
}

hr {
    margin: 20px 0;
}
</style>